<template>
    <div class="captcha_input_wrapper">
        <div class="row-center">
            <input
                v-for="(item, index) in captchas"
                :id="'captcha' + index"
                :key="index"
                v-model="item.num"
                class="captcha-input-box row-center"
                :class="isError ? 'error' : ''"
                type="tel"
                maxlength="1"
                @input="inputFinash(index, item.num)"
                @focus="handleFocus(index)"
                @keydown="inputDirection($event, index)"
                @keyup.enter="onInputEnter"
            />
        </div>
        <div v-if="isError" class="error-text">
            <span>请输入正确的验证码</span>
        </div>
        <div class="send-text">
            <span v-if="codeShow" class="send" @click="sendSms">重新发送</span>
            <span v-else>{{ count }}秒后可重新获取验证码</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineExpose, onBeforeUnmount, watchEffect, onMounted } from 'vue';
import useCountDown from '@/hooks/useCountDown';
import usePasswordInput from '../hooks/usePasswordInput';
import { useStore } from 'vuex';

const emits = defineEmits(['phoneLogin', 'sendSms']);

const store = useStore();

// 发送验证码
const { codeShow, count, handleGetCode, clearTime } = useCountDown;
const { inputFinash, inputDirection, handleFocus, setErrorState, resetPwd, captchas, isError } = usePasswordInput;

const sendSms = () => emits('sendSms');
const phoneLogin = () => {
    const len = captchas.value.filter((nums) => nums.num).length;
    const every = captchas.value.every((nums) => !isNaN(Number(nums.num)));
    if (len === 6 && every) {
        emits('phoneLogin', captchas.value.map((x) => x.num).join(''));
    }
};
let isCanPhoneLogin = true;
const onInputEnter = () => {
    if (!isCanPhoneLogin) {
        return;
    }
    phoneLogin();
    isCanPhoneLogin = false;
    setTimeout(() => {
        isCanPhoneLogin = true;
    }, 2000);
};
// 数据初始化
onMounted(() => {
    resetPwd();
    handleFocus(0);
    store.commit('app/setLoginLoading', false);
    watchEffect(() => {
        phoneLogin();
    });
});
// 卸载销毁
onBeforeUnmount(() => {
    clearTime();
});
// 对外暴露可执行方法
defineExpose({
    setErrorState,
    handleGetCode,
    resetPwd,
});
</script>

<style lang="scss">
.row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.captcha_input_wrapper {
    width: 100%;
    margin-top: 24px;
}

.captcha-input-box {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    font-size: 22px;
    font-family: Arial-Regular, Arial;
    font-weight: 400;
    color: #000;
    text-align: center;

    &:focus {
        outline: none;
        border: 1px solid #e60044;
    }

    &.error {
        border: 1px solid #e60044;
    }
}

.error-text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #e60044;
    text-align: left;
    text-indent: 3px;
}

.send-text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #808080;
    margin-top: 27px;

    .send {
        color: #4d88ff;
    }
}
</style>
